<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>旅游地图相册Demo | by giscafer</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- leaflet cdn js文件 -->
    <link
      href="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcss.com/leaflet/1.3.4/leaflet.js"></script>
    <!-- jquery cdn -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- viewerjs -->
    <link
      href="https://cdn.bootcss.com/viewerjs/1.3.1/viewer.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcss.com/viewerjs/1.3.1/viewer.min.js"></script>
    <style type="text/css">
      .accordion {
        width: 60px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 888;
        background: #eee;
        border-bottom-left-radius: 24px;
      }
      .accordion .accordion-btn {
        background-color: #eee;
        color: #333;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        font-size: 14px;
      }
      .accordion.active {
        width: 360px;
      }
      .accordion .accordion-panel {
        display: none;
        padding: 10px 24px 32px 24px;
        height: 600px;
        overflow-y: scroll;
      }

      .accordion.active .accordion-panel {
        display: block;
      }

      /* 定义列表项的样式 */
      .list-item {
        padding: 5px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
      }
      /* 定义展开内容的样式 */
      .expand-content {
        display: none;
        padding: 10px;
        border: 1px solid #ccc;
        margin-left: 20px;
      }
      /* 定义悬浮提示框的样式 */
      .tooltip {
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 5px;
        display: none;
        z-index: 999;
      }
    </style>
  </head>
  <body>
    <div id="mapcontainer">
      <!-- 列表容器 -->
      <div class="accordion">
        <button class="accordion-btn">展开&or;</button>
        <div class="accordion-panel">
          <!-- 这里放要展开/收起的内容 -->
        </div>
      </div>

      <!-- 地图容器 -->
      <div id="map"></div>
      <div id="legend"></div>

      <!-- 定义模板 -->
      <script type="text/template" id="list-template">
        {{#data}}
        <div class="list-item" data-longitude={{longitude}} data-latitude={{latitude}}>
            <span class="city">{{city}}</span>
            <span class="date">{{date}}</span>
            <div class="tooltip">{{remark}}</div>
            <div class="expand-content">{{remark}}</div>
        </div>
        {{/data}}
      </script>
    </div>
    <script src="https://www.unpkg.com/jquery@3.6.4/dist/jquery.js"></script>
    <!--  mustache 模板引擎库 -->
    <script src="https://unpkg.com/mustache@4.2.0/mustache.js"></script>
    <script>
      function genDataListHtml(data) {
        // 将数据填充到模板中
        var template = $('#list-template').html();
        var html = Mustache.render(template, { data: data });
        $('.accordion-panel').html(html);

        // 绑定点击事件
        $('.list-item').click(function () {
          $(this).toggleClass('active');
          $(this).find('.expand-content').slideToggle();
          const el = $(this);
          const longitude = el.attr('data-longitude');
          const latitude = el.attr('data-latitude');
          var latlng = L.latLng(latitude - 0, longitude - 0);
          map.panTo(latlng);
          map.setZoom(8);
        });

        // 绑定悬浮事件
        $('.list-item').hover(
          function () {
            var tooltip = $(this).find('.tooltip');
            tooltip
              .css({
                top: $(this).offset().top - tooltip.outerHeight() - 5,
                left:
                  $(this).offset().left +
                  $(this).outerWidth() / 2 -
                  tooltip.outerWidth() / 2,
              })
              .show();
          },
          function () {
            $(this).find('.tooltip').hide();
          }
        );
      }
      $(function () {
        // 获取data数据后再执行模板渲染
        $.get(
          'data/data.json?v=' + new Date().getTime(),
          function (data, status) {
            genDataListHtml(data.rows);
          }
        );
        $('.accordion-btn').click(function () {
          const el = $(this).parent();
          el.toggleClass('active');
          if (el.hasClass('active')) {
            $(this).html('收起&and;');
          } else {
            $(this).html('展开&or;');
          }
        });
      });
    </script>
    <!-- <div id="map" style="width: 100%; height: 850px"></div> -->
    <!-- demo逻辑源码 -->
    <script src="./app.js"></script>
  </body>
</html>
